<template>
  <div class="container" @click="handleClick">
    <slot></slot>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      let { index, disabled } = event.target.dataset
      console.log(index,disabled,event.target)
      if (!disabled&&index) this.$emit('change', index)
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 155px;
  background-color: rgb(255, 252, 233);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
</style>